<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input size="small" placeholder="成品加工单号" style="width: 250px" v-model.trim="form.processing_code" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input size="small" placeholder="sku编码" style="width: 250px" v-model.trim="form.sku_id" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.wh_id" size="small" placeholder="仓库类型" style="width: 110px" clearable>
                        <el-option :value=1 label="主仓"></el-option>
                        <el-option :value=2 label="销退仓"></el-option>
                        <el-option :value=3 label="进货仓"></el-option>
                        <el-option :value=4 label="次品仓"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.warehouse" size="small" placeholder="仓库名称" style="width: 110px" clearable>
                        <el-option value="SSY" label="十三余"></el-option>
                        <el-option value="YXRG" label="有香如故"></el-option>
                        <el-option value="YXYM" label="一弦一木"></el-option>
                        <el-option value="JS" label="锦瑟"></el-option>
                        <el-option value="QYX" label="七月夕"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-popover placement="bottom" width="450" trigger="click">
                        <el-form label-width="90px" label-position="left">
                            <el-form-item label="回货单号">
                                <el-input size="small" placeholder="WMS入库回货单号" style="width: 80%" v-model.trim="form.io_id" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="采购通知单">
                                <el-input size="small" placeholder="OMS采购通知单" style="width: 80%" v-model.trim="form.po_id" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="回货日期">
                                <el-date-picker value-format="yyyy-MM-dd" v-model="form.io_date" type="daterange" size="small" style="width: 80%"
                                                range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="可对账日期">
                            <el-date-picker value-format="yyyy-MM-dd" v-model="form.ke_date" type="daterange" size="small" style="width: 80%"
                                            range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                            </el-form-item>
                        </el-form>
                        <el-badge :is-dot="(!!form.io_id || !!form.po_id || !!form.io_date || !!form.ke_date)" slot="reference" class="more-btn">
                            <el-button size="small" type="warning" plain>更多</el-button>
                        </el-badge>
                    </el-popover>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini" @selection-change="selectedHander"
                      :summary-method="getSummaries" show-summary>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="入库回货单号" prop="io_id" width="150"></el-table-column>
                <el-table-column label="仓库名称" align="center" prop="warehouse" width="80"></el-table-column>
                <el-table-column label="供应商名称" align="center" prop="supplier_name" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column label="SKU编码" align="center" prop="sku_id" width="150"></el-table-column>
                <el-table-column label="加工单" align="center" prop="processing_code" width="150"></el-table-column>
                <el-table-column label="采购通知单" align="center" prop="po_id" width="150"></el-table-column>
                <el-table-column label="数量" align="center" prop="qty" width="80"></el-table-column>
                <el-table-column label="回货日期" align="center" prop="io_date" width="135"></el-table-column>
                <el-table-column label="可对账日期" align="center" prop="ke_date" width="135"></el-table-column>
                <el-table-column label="对账状态" align="center" prop="ke_status" width="80">
                    <template scope="{ row }">
                        <el-tag size="mini" v-if="row.ke_status==0" type="danger">不可对账</el-tag>
                        <el-tag size="mini" v-else>可对账</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否对账" align="center" prop="k_status" width="80">
                    <template scope="{ row }">
                        <el-tag size="mini" v-if="row.k_status==0" type="info">未对账</el-tag>
                        <el-tag size="mini" v-else type="success">已对账</el-tag>
                    </template>
                </el-table-column><el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip></el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;">
                <el-button v-if="nodeActions.includes('edit')" size="mini" type="primary" :loading="btnLoading" :disabled="selectedData.length==0" @click="setDateBtn(1)">延期1个月</el-button>
                <el-button v-if="nodeActions.includes('edit')" size="mini" type="primary" :loading="btnLoading" :disabled="selectedData.length==0" @click="setDateBtn(2)">延期2个月</el-button>
                <el-button v-if="nodeActions.includes('edit')" size="mini" type="warning" :loading="btnLoading" :disabled="selectedData.length==0" @click="setDateBtn(0)">寄卖</el-button>
                <el-button v-if="nodeActions.includes('edit')" size="mini" type="success" :loading="btnLoading" :disabled="selectedData.length==0" @click="setDateBtn(11)">正常</el-button>
                <Page style="float: right;" :total="total" :current="page" :page-size="limit" show-sizer :page-size-opts="[20, 50, 100, 500]" show-total
                      @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
            </div>
        </el-col>
    </section>
</template>

<script>

import {returnsDateSet, returnsList} from "@/api/soa/returns";

export default {
    name: "soa_returns",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            selectedData: [],
            form: {processing_code: "", sku_id: "", wh_id: 3, io_date: "", ke_date: "", po_id: "", io_id: "", warehouse: ""},

        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{
        // 监听路由参数的变化
        '$route.params.processing_code': {
            immediate: true,
            handler(val) {
                if(!!val && val != this.form.processing_code){
                    this.$set(this.form, 'processing_code', val);
                    this.searchBtn();
                }
            }
        },
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //页数
        pageSizeChange(pageSize){
            this.limit = pageSize;
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            param = Object.assign(param, this.form);
            if(this.user.source_from == "gc"){
                param.supplier_id = this.user.supplier_id;
            }
            this.loading = true;
            returnsList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        selectedHander(list){
            this.selectedData = list;
        },
        //对账日期延期
        setDateBtn(type){
            let msg = type==1?"延期1个月?":(type==2?"延期2个月?":(type==0?"寄卖?":"正常?"));
            this.$confirm("确定"+msg, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let ids = [];
                this.selectedData.forEach(item =>{
                    ids.push(item.id);
                });
                this.btnLoading = true;
                returnsDateSet({ids: ids, type: type}).then((res) =>{
                    this.btnLoading = false;
                    if(res.code === 0){
                        this.$message.success("设置成功");
                        this.getData();
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.btnLoading = false;
                })
            }).catch(()=>{

            })
        },
        //合计
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                const values = data.map((item) => Number(item[column.property]));
                if (!values.every((value) => isNaN(value)) && column.label == "数量") {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = sums[index];
                } else {
                    sums[index] = "";
                }
            });
            return sums;
        },
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>
.more-btn /deep/ .el-badge__content.is-fixed.is-dot{
    top: 5px;
}
</style>
